<template>
  <a-form :form="form">
    <div class="drawer">
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('permission.resource.label') }}</label></div>
        <div class="drawer-control">
          <a-form-item>
            <a-input v-model="data.label" :allow-clear="true" :placeholder="$t('enter.please')" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-item">
        <div class="drawer-label"><label>{{ $t('permission.symbol') }}</label></div>
        <div class="drawer-control">
          <a-form-item>
            <a-textarea rows="4" v-model="data.remark" :allow-clear="true" :placeholder="$t('enter.please')" />
          </a-form-item>
        </div>
      </div>
      <div class="drawer-button">
        <a-form-item>
          <a-button v-if="loading" type="primary" :disabled="true">{{ $t('action.submit.requesting') }}</a-button>
          <a-button v-else type="primary" @click="submit">{{ $t('action.submit') }}</a-button>
          <a-button type="default" @click="close">{{ $t('action.close') }}</a-button>
        </a-form-item>
      </div>
    </div>
  </a-form>
</template>

<script>
import { addPermissionApplication } from '@/api/v1'

export default {
  components: { },
  data () {
    return {
      data: { },
      form: this.$form.createForm(this),
      loading: false
    }
  },
  methods: {
    close () { this.$emit('update:close') },
    submit () {
      this.loading = true
      addPermissionApplication(this.data, () => {
        this.loading = false
        this.$emit('update:submit')
      }, (err) => {
        this.loading = false
        this.$message.error(err)
      })
    }
  },
  mounted () { this.data = this.origin },
  name: 'PermissionApplicationAdd',
  props: { origin: { type: Object, required: true } },
  watch: { origin: { handler (data) { this.data = data } } }
}
</script>
